<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="我的订单" :border-bottom="false"></u-navbar>
		</view>
		<view>
			<u-tabs-swiper ref="tabs1" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				active-color="#f5ce31" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiperBox">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y @scrolltolower="onreachBottom" lower-threshold="10"
					:style="{height: boxHeight + 'px'}">
					<view class="orderTotal" v-if="item.list.length>0">
						<view class="orderItem container_br" v-for="order in item.list" :key="order.id"
							@click="goDetail(order.id)">
							<view class="status">
								<span v-if="order.status==2">待收货</span>
								<span v-if="order.status==0">待付款</span>
								<span v-if="order.status==1">待发货</span>
								<span v-if="order.status==3">已完成</span>
								<span v-if="order.status==4">退款中</span>
								<span v-if="order.status==5">退款完成</span>
								<span v-if="order.status==-1">已取消</span>
								<span v-if="order.status==-2">拒绝退款</span>
							</view>
							<view class="goods flc" v-if="order.goods" v-for="c in order.goods" :key="c.id">
								<view class="left" v-if="c.goods_images_format">
									<image :src="c.goods_images_format[0]" mode="widthFix"
										style="width: 180rpx; border-radius: 20rpx;">
									</image>
								</view>
								<view class="right ml2">
									<view class="name">
										{{c.goods_name}}
									</view>
									<view class="type">
										{{c.goods_category}}
									</view>
									<view class="price">
										￥{{c.goods_price}}
									</view>
								</view>
							</view>
							<view class="totalPrice">
								<span>共{{order.goods.length}}件，合计￥{{order.pay_amount}}</span>
							</view>
							<view class="btns">
								<view class="btn">
									查看详情
								</view>
								<view class="btn pay" v-if="order.status==0" @click.stop="goPay(order)">
									立即支付
								</view>
								<view class="btn cancel" v-if="order.status==0" @click.stop="cancelBtn(order.id)">
									取消订单
								</view>
								<view class="btn relation" v-if="order.status==1||order.status==2"
									@click.stop="refund(order)">
									申请退款
								</view>
								<view class="btn pay" v-if="order.status==2" @click.stop="submitOrder(order.id)">
									确认收货
								</view>
								<view class="btn pay" v-if="order.status==3&&order.goods[0].is_appraise==0"
									@click.stop="openPj(order)">
									评价
								</view>
								<view class="btn" v-if="order.status==3&&order.goods[0].is_appraise==1">
									已评价
								</view>
							</view>
						</view>
						<u-loadmore :status="status" @loadmore="loadmore" />
						<view class="H100">

						</view>
					</view>
					<view class="noData" style="width: 410rpx;height: 240rpx; margin: 60rpx auto;" v-else>
						<image src="../../static/img/empty.png" mode="widthFix" style="width: 410rpx;"></image>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="showPj" mode="bottom" border-radius="20">
			<view class="popShow">
				<u-icon size="32" name="close" color="#666" class="close" @click="()=>this.showPj = false"></u-icon>
				<view class="top">
					<span class="fbpl">发表评价</span>
				</view>
				<view class="rating">
					<span>商品评价</span>
					<u-rate :count="count" v-model="rateNumber" @change="valChange" active-color="#F5CE31FF"
						inactive-color="#b2b2b2" gutter="20" size="50" style="margin: 0 20rpx;"></u-rate>
					<span v-if="rateCt==1">特别差</span>
					<span v-if="rateCt==2">差</span>
					<span v-if="rateCt==3">一般</span>
					<span v-if="rateCt==4">好</span>
					<span v-if="rateCt==5">非常好</span>
				</view>
				<view class="context">
					<view class="title">
						评论内容<span style="color: #999;">(至少15字以上)</span>
					</view>
					<textarea class="textCt" placeholder="商品满足您的期待吗？说说它的优点和美中不足吧。" v-model="content" />
				</view>
				<view class="uploadTp">
					<view class="title">
						图片<span>({{upload.length}}/3)</span>
					</view>
					<view class="upload">
						<view class="item" v-for="(item,index) in pic" :key="index">
							<image :src="item" mode="widthFix" style="width: 200rpx;"></image>
							<u-icon size="28" :name="'/static/icon/del.png'" class="deleteTp"
								@click.stop="deleteTp(index)"></u-icon>
						</view>
						<view class="addPic item" @click="uploadTp" v-if="upload.length<3">
							<image src="../../static/img/upload.png" mode="widthFix" style="width: 200rpx;"></image>
						</view>
					</view>
				</view>
				<view class="submitRate" @click="sendMessage">
					提交评价
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOrderList,
		cancelOrder,
		commitOrder,
		confirmOrder
	} from '@/api/index.js'
	import baseUrl from '@/config/config.js'
	import {
		toast,
		tiao,
		toastC,
		toastload,
		closeload
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				boxHeight: wx.getSystemInfoSync().windowHeight - 48 - 37,
				user_id: "",
				page: 1,
				list: [{
						name: '全部',
					}, {
						name: '待付款',
					}, {
						name: '待发货',
					},
					{
						name: '待收货',
					},
					{
						name: '已完成',
					},
					{
						name: '待退货',
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs: [{
					id: '1',
					list: []
				}, {
					id: '2',
					list: []
				}, {
					id: '3',
					list: []
				}, {
					id: '4',
					list: []
				}, {
					id: '5',
					list: []
				}, {
					id: '6',
					list: []
				}], // 要展示的业务数据列表
				status: 'loadmore',
				showPj: false,
				count: 5,
				rateNumber: 3,
				content: "",
				upload: [],
				rateCt: 3,
				goods_id: "",
				pic: [],
				load: "",
				flag:""
			};
		},
		onLoad(res) {
			let self = this
			this.$nextTick(() => {
				this.load = res.id
				self.tabsChange(res.id)
			})
		},
		onShow() {
			let self = this
			this.$nextTick(() => {
				if(self.flag){
					self.tabsChange(this.current)
				}
			})
		},

		methods: {
			init() {

			},
			valChange(e) {
				console.log(e);
				this.rateCt = e
			},
			openPj(item) {
				this.goods_id = item.goods[0].id
				console.log(item);
				console.log(this.goods_id);
				this.showPj = true
			},
			sendMessage() {
				if (!this.content) {
					toast("请勿发送空信息")
					return
				}
				var {
					nickname,
					user_id,
					avatar
				} = this.userInfo
				let obj = {
					images: this.upload,
					content: this.content,
					goods_star: this.rateCt,
					order_goods_id: this.goods_id
				}
				console.log(obj);
				toastload()
				commitOrder(obj).then(res => {
					if (res.code == 200) {
						toastC("评价成功")
						setTimeout(() => {
							this.tabsChange(this.current)
						}, 500)
					}
					closeload()
				})
				this.showPj = false

			},
			onreachBottom() {
				console.log("加载");
				if (this.status == 'loadmore') {
					this.page++
					this.getdata(this.swiperCurrent)
				} else {
					toast("没有更多了")
				}
			},
			tabsChange(index) {
				this.flag = this.current
				this.swiperCurrent = index
				this.page = 1
				this.status = 'loading'
				this.tabs[index].list = []
				this.getdata(index)

			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs1.setDx(dx);
			},

			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs1.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			loadmore() {

			},
			getdata(index) {
				let obj = {
					page: this.page,
					status: index - 1
				}
				if (index == 0) {
					delete obj.status
				}
				getOrderList(obj).then(res => {
					toastload()
					console.log(res);
					if (res.last_page > res.page) {
						this.page++
						this.status = 'loadmore'
					} else {
						this.status = 'nomore'
					}
					res.list.forEach(item => {

						if (item.goods_sku_id) {
							let obj = {
								...item,
								skus_name: item.goods.skus.list.map(e => {
									if (e.id == item.goods_sku_id) {
										return e.names[0]
									}
								})
							}
							this.tabs[index].list.push(obj)

						} else {
							this.tabs[index].list.push(item)
						}

					})
					closeload()

				})
			},
			cancelBtn(id) {
				toastload()
				cancelOrder({
					order_id: id
				}).then(res => {
					if (res.code == 200) {
						toast("取消成功")
						setTimeout(() => {
							this.tabsChange(this.current)
						}, 500)
					}
					closeload()
				})
			},
			deleteTp(index) {
				this.upload.splice(index, 1)
				this.pic.splice(index, 1)
			},
			uploadTp() {
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.showLoading({
							title: '正在上传',
							mask: true
						});
						uni.uploadFile({
							url: baseUrl.baseUrl + 'public/images/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								console.log(JSON.parse(res.data));
								if (res.statusCode == 200) {
									let data = JSON.parse(res.data);
									if (data.data) {
										console.log("开始修改");
										self.pic.push(baseUrl.base + '/uploads/' + data.data);
										self.upload.push(data.data)
									}
									uni.hideLoading();
								}
							},
							complete(res) {
								uni.hideLoading();
							}
						})
					}
				});

			},
			goPay(item) {
				let info = {
					order_no: item.order_no,
					money: item.total_amount,
				}
				setTimeout(() => {
					uni.redirectTo({
						url: '/page/payment/payment?order_no=' +
							item.order_no + '&money=' + item.total_amount
					});
				}, 500)
			},
			// 申请退款
			refund(item) {
				tiao('/page/refundPrice/refundPrice?id=' + item.id)
			},
			phoneCall(phone) {
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.makePhoneCall']) {
							this.callNumber();
						} else {
							uni.authorize({
								scope: 'scope.makePhoneCall',
								success: () => {
									this.callNumber();
								},
								fail: () => {
									uni.openSetting({
										success: (res) => {
											if (res.authSetting[
													'scope.makePhoneCall']) {
												this.callNumber(phone);
											}
										}
									});
								}
							});
						}
					}
				});

			},
			callNumber(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						console.log('拨打电话成功！');
					},
					fail: () => {
						console.error('拨打电话失败！');
					}
				});
			},


			goDetail(order_number) {
				let obj = {
					order_number,
				}
				tiao('/page/orderDetail/orderDetail', obj)
			},
			cuiSend() {
				toast("已催商家赶紧发货")
			},
			submitOrder(id) {
				let self = this
				uni.showModal({
					title: '是否确认收货',
					success(res) {
						if (res.confirm) {
							confirmOrder({
								order_id: id
							}).then(res => {
								if (res.code == 200) {
									toastC("确认收货成功")
									setTimeout(() => {
										self.tabsChange(self.current)
									})
								}
							})
						}
					}
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.swiperBox {
		height: 1360rpx;

		.orderTotal {
			// height: 1360rpx;
			// overflow: auto;

			// &::-webkit-scrollbar {
			// 	display: none;
			// }
		}

	}

	.btns {
		padding: 15rpx 0;
		border-top: 1rpx solid #dedede;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.btns .btn {
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1px solid #E6E6E6;
		text-align: center;
		line-height: 60rpx;
		margin: 0 10rpx;
	}

	.btns .pay {
		background: #f5ce31;
		color: #FFFFFF;
	}

	.btns .cancel,
	.btns .relation,
	.btns .detail {
		font-size: 28rpx;
		color: #666666;
	}

	.btns .cui {
		border: 1px solid #f5ce31;
		color: #f5ce31;
	}

	.status {
		text-align: right;
	}

	.goods {
		width: 180rpx;
		height: 180rpx;

		.right {
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				width: 400rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.price {
				color: #FA453C;
			}

			.type {
				font-size: 26rpx;
				color: #666;
			}
		}
	}

	.totalPrice {
		margin-top: 20rpx;
		padding: 20rpx 0;
		border-top: 1px solid #E6E6E6;
		text-align: right;
	}

	.popShow {
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;

		.close {
			position: absolute;
			top: 58rpx;
			left: 20rpx;
		}

		.top {
			padding: 20rpx;
			border-bottom: 1rpx solid #dedede;
			text-align: center;
			font-size: 36rpx;
			color: #333333;

		}

		.rating {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #dedede;
		}

		.context {
			padding: 20rpx 0;

			.title {
				margin: 20rpx 0;
			}

			.textCt {
				width: 710rpx;
				height: 120rpx;
			}
		}

		.uploadTp {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #dedede;

			.title {
				margin: 10rpx 0;
			}

			.upload {
				display: flex;
				align-items: center;
			}

			.item {
				width: 200rpx;
				height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
				position: relative;
			}

			.item .deleteTp {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}

		.submitRate {
			text-align: center;
			width: 690rpx;
			height: 80rpx;
			background: #F5CE31;
			border-radius: 40rpx;
			line-height: 80rpx;
			margin: 30rpx auto;
			color: #333333;
		}
	}
</style>